<template>
  <el-dialog :title="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'" :close-on-click-modal="false" :visible.sync="visible"
    class="cu-dialog cu-dialog_center" lock-scroll width="900px">
    <el-form ref="elForm" :model="dataForm" size="small" label-width="120px" label-position="right"
      :disabled="!!isDetail" :rules="rules">

      <el-col :span="12" >
        <el-form-item label="校区品牌" prop="brand">
          <el-select v-model="dataForm.brand" placeholder="请选择校区品牌" @change="handleChangeBrand">
            <el-option :key="item.brand" :label="item.fullName" :value="item.enCode" v-for="item in brandOptions" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="选择校区">
          <el-select v-model="dataForm.campusId" placeholder="请选择校区" filterable clearable>
            <el-option v-for="(item, index) in campusOptions" :key="index" :label="item.fullName" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="外部订单编号" prop="orderNo">
          <el-input v-model="dataForm.orderNo" placeholder="请输入外部订单编号"  :style="{ width: '100%' }"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="订单名称" prop="orderTitle">
          <el-input v-model="dataForm.orderTitle" placeholder="请输入订单名称"  :style="{ width: '100%' }"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="订单来源" prop="orderSource">
          <el-select v-model="dataForm.orderSource" placeholder="请选择订单来源" clearable required :style="{ width: '100%' }"
                     filterable>
            <el-option v-for="item in orderSourceOptions" :key="item.enCode" :label="item.fullName"
                       :value="item.enCode"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="订单类型" prop="orderType">
          <el-select v-model="dataForm.orderType" placeholder="请选择订单类型" clearable required :style="{ width: '100%' }"
                     filterable>
            <el-option v-for="item in orderTypeOptions" :key="item.enCode" :label="item.fullName"
                       :value="item.enCode"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="支付状态" prop="payStatus">
          <el-select v-model="dataForm.payStatus" placeholder="请选择支付状态" clearable required :style="{ width: '100%' }"
                     filterable>
            <el-option v-for="item in payStatusOptions" :key="item.enCode" :label="item.fullName"
                       :value="item.enCode"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="支付编号" prop="payNo">
          <el-input v-model="dataForm.payNo" placeholder="请输入支付编号" clearable required
                    :style="{ width: '100%' }"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="支付时间" prop="payTime">
          <el-date-picker v-model="dataForm.payTime" placeholder="请选择支付时间" clearable required :style="{ width: '100%' }" type="date" format="yyyy-MM-dd" value-format="timestamp"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="支付金额" prop="payment">
          <el-input v-model="dataForm.payment"  placeholder="请输入支付金额" clearable required :style="{ width: '100%' }"></el-input>
        </el-form-item>
      </el-col>
<!--      <el-col :span="24" >
        <el-form-item label="备注" prop="description">
          <el-input v-model="dataForm.description" placeholder="请输入" show-word-limit :style="{ width: '100%' }"
                    type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"></el-input>
        </el-form-item>
      </el-col>-->
      <el-col :span="24">
        <el-form-item label-width="0">
          <groupTitle content-identity="left" content="商品列表"></groupTitle>
          <el-table :data="dataForm.orderItems" size="mini" empty-text="点击下方“添加”按钮">
            <el-table-column type="index" width="50" label="序号" align="center" />
            <el-table-column prop="goodsCategoryName" label="商品名称" header-align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.goodsCode" placeholder="请选择商品" filterable clearable @change="getGoodsTypeOptions(scope)">
                  <el-option v-for="item in goodsOptions" :key="item.goodsCode" :label="item.goodsCategoryName" :value="item.goodsCode"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="goodsTypeName" label="商品规格" header-align="center">
            </el-table-column>
            <el-table-column prop="price" label="价格" align="center" width="140">
            </el-table-column>
            <el-table-column label="操作" width="50">
              <template slot-scope="scope">
                <el-button size="mini" type="text" class="cu-table-delBtn" @click="handleDelGiveList(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="table-actions" @click="addHandleGiveList()">
            <el-button type="text" icon="el-icon-plus">添加</el-button>
          </div>
        </el-form-item>
      </el-col>
        <!-- <el-row>
        <el-col :span="12" v-if="custom.hasFormP('price')">
          <el-form-item label="单价" prop="price">
            <el-input v-model="dataForm.price" placeholder="请输入" clearable required :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="custom.hasFormP('stock')">
          <el-form-item label="库存" prop="stock">
            <el-input-number v-model="dataForm.stock" placeholder="数字文本" required :step="1"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" v-if="custom.hasFormP('num')">
          <el-form-item label="数量" prop="num">
            <el-input-number v-model="dataForm.num" placeholder="数字文本" required :step="1" :min="1"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="custom.hasFormP('isNomalVirtual')">
          <el-form-item label="虚拟商品" prop="isNomalVirtual">
            <el-switch v-model="dataForm.isNomalVirtual" class="switch" :active-value="1" :inactive-value="0" active-text="虚拟" inactive-text="实体"></el-switch>
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export { default } from './index.js'
</script>
<style lang="scss">
// 自定义switch样式
.switch {
  .el-switch__label--left {
    position: relative;
    left: 70px;
    color: #fff;
    z-index: -1111;
    span {
      width: 40px;
    }
  }
  .el-switch__label--right {
    position: relative;
    right: 60px;
    color: #fff;
    z-index: -1111;
    span {
      display: inline-block;
      width: 40px;
    }
  }
  .el-switch__core {
    width: 65px !important;
  }
  .el-switch__label--right.is-active {
    z-index: 10;
    color: #fff !important;
  }
  .el-switch__label--left.is-active {
    z-index: 10;
    color: #9c9c9c !important;
  }
}
</style>
